*{
	
	padding: 0;
	margin:0;
	font-family: "Cascadia Mono";
}
/* background*/

.hero{
	width: 100%;
	height: 100vh;
	background: #A9A9A9;
	display: flex;
	align-items:center;
	justify-content: center;
}

/*music player*/
.music{
	width: 90%;
	max-width: 500px;
	padding: 20px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	background: rgba(219,219,219,1.00);
	color:#555;
	border-radius: 8px;
	
	background-repeat: no-repeat;
  	background-size: 110%;
	background-position: center;
	background-opacity:.5;
}

.track 
{
	display: flex;
	align-items: center;
	
	
}
.track img
{
	width:75px;
	margin-right: 5px;
	shadow: 0 0 20px rgba(0,0,0,.3);
	cursor: pointer;
	transition: .3s;
}
.track img:hover
{
	width:75px;
	margin-right: 5px;
	cursor: pointer;
	 -webkit-filter: drop-shadow(0 0 15px rgba(34,34,34,0.5));
}
.track p
{
	color: #A3A3A3;
	-webkit-filter: drop-shadow(0 0 5px rgba(34,34,34,0.1));
}

.progress{
	-webkit-appearance:none;
	 -webkit-filter: drop-shadow(0 0 5px rgba(34,34,34,0.1));
	width: 100%;
	height: 5px;
	border-radius: 5px;
	cursor:pointer;
	margin:15px;
}

.progress::-webkit-slider-thumb{
	 -webkit-appearance: none;
	appearance: none;
	background: rgba(211,58,86,1.00);
	width:15px;
	height:15px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(211,58,86,.3);
	transition:.2s;
	
}
.progress::-webkit-slider-thumb:hover{
	 -webkit-appearance: none;
	appearance: none;
	background: rgba(255,235,239,1.00);
	width:10px;
	height:25px;
	border-radius: 0%;
	box-shadow: 0 0 20px rgba(255,71,104,1.00);
}

.volslide {
	display: flex;
	align-items: center;
	margin-left: 5px;
	
}
.volslide img {
	width: 45px;
	margin-right:-15px;
}

.vol{
	-webkit-appearance:none;
	 -webkit-filter: drop-shadow(0 0 5px rgba(34,34,34,0.1));
	width: 10%;
	height: 5px;
	border-radius: 5px;
	cursor:pointer;
	margin:15px;
}
.vol::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	background: rgba(211,58,86,1.00);
	width:15px;
	height:15px;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(211,58,86,.3);
	transition:.2s;
	
}
.vol::-webkit-slider-thumb:hover{
	 -webkit-appearance: none;
	appearance: none;
	background: rgba(255,235,239,1.00);
	width:10px;
	height:25px;
	border-radius: 0%;
	box-shadow: 0 0 20px rgba(255,71,104,1.00);
}
/*end music player*/

